<!DOCTYPE html><html>
  <head>
    <style>
    .frame-default { background-color: rgb(102, 153, 204);
      border-top-color: rgb(102, 153, 204); border-right-color: rgb(102,
      153, 204); border-bottom-color: rgb(102, 153, 204);
      border-left-color: rgb(102, 153, 204); color: white; font-family:
      sans-serif; font-weight: bold; font-style: normal; }
    .frame-header { width: 704px; }
    .frame-outer-w { width: 704px; }
    .frame-outer-h { height: 302px; }
    .frame-inner-w { width: 700px; }
    .frame-inner-h { height: 300px; }
    .frame-chart-w { width: 500px; }
    .frame-p-w { width: 200px; }
    .thumb-outer-w { width: 144px; }
    .thumb-outer-h { height: 62px; }
    .thumb-inner-w { width: 144px; }
    .thumb-inner-h { height: 60px; }
    .thumb-chart-w { width: 100px; }
    .thumb-p-w { width: 40px; }
    .frame-p-no-pic { font-size: 25px; }
    .frame-p { font-size: 18px; }
    .thumb-p-no-pic { font-size: 5px; }
    .thumb-p { font-size: 4px; }
    </style>
  <script type="text/javascript" src="res/story_slider.js"></script>
  <link rel="stylesheet" href="res/story_frame.css">
  <link rel="stylesheet" href="res/story_slider.css">
  <script type="text/javascript">
    function createSlider() {
      new fusiontables.StoryBuilder.PreviewSlider(document.getElementById("slider-container"), 704, 302).createFromJson([{'text':'This%20visual%20story%20allows%20you%20to%20tell%20a%20step-by-step%20story%20using%20Fusion%20Tables%20charts%2C%20YouTube%20videos%2C%20and%20images.%0A'},{'chartSrc':'https%3A//www.google.com/fusiontables/embedviz%3Fviz%3DMAP%26q%3Dselect+col8+from+771673+%26h%3Dfalse%26lat%3D34.82038680443693%26lng%3D-277.44740575000003%26z%3D3%26t%3D1%26l%3Dcol8','text':'The%20map%20in%20the%20left%20is%20interactive--you%20can%20zoom%20in%20/%20out%2C%20pan%20around%2C%20and%20even%20see%20it%20to%20street%20view%20mode'},{'chartSrc':'http%3A//www.youtube.com/embed/9f7LwXjGCSA','text':'You%20can%20also%20add%20a%20video%20to%20your%20story...'},{'chartSrc':'http%3A//www.google.com/logos/2011/korea_day-2011-hp.jpg','text':'...%20as%20well%20as%20images%20...%0A'},{'text':'To%20build%20a%20story%20using%20this%20template%2C%20go%20to%20%3Cbr%3E%3Ca%20href%3D%27http%3A//story.googlecode.com/svn/trunk/fusiontables/fusiontables_story_builder.html%27%3EFusion%20Tables%20Visual%20Story%20Builder%3C/a%3E%0A'}]);
    }
  </script>
</head>
<body
  onload="createSlider();">
  <div id="slider-container"></div>
</body>
</html>
